<template>
	<view class="page-container">
		
		<!-- #ifndef MP-TOUTIAO -->
		<!-- 自定义导航 -->
		<st-custom-header title="积分明细" titleAlign="left" :backgroundColor="backgroundColor"></st-custom-header>
		<!-- #endif -->
		
		<!-- 背景块 -->
		<view class="header-bg-block"></view>
		
		<!-- 圆形渐变 -->
		<view class="header-bg-circle"></view>
		
		<!-- 我的积分 -->
		<view class="credit-wrapper">
			<view class="credit-wrapper__info-bar">
				我的积分：<text class="num">{{creditCount}}</text>
			</view>
		</view>
		
		<view class="credit-content">
			<view class="credit-tab-area">
				<view class="credit-tab-bar">
					<v-tabs
					v-model="tabCurrent" 
					shape="arc" 
					color="#666" 
					:scroll="false"
					:tabs="tabGroup" 
					:lineScale="0.6" 
					:lineColor="lineColor"
					:activeColor="activeColor" 
					lineHeight="8rpx" 
					lineRadius="0" 
					activeFontSize="28rpx" 
					bgColor="transparent"  
					@change="clickTab">
					</v-tabs>
				</view>
				<view class="credit-cell-group">
					<view class="credit-cell-group__item" v-for="(item, index) in creditList" :key="index">
						<view class="hd">
							<view class="con">{{item.content}}</view>
							<view class="date">{{item.addtime}}</view>
						</view>
						<view class="bd c-green" v-if="item.type == 1">-{{item.jifen}}</view>
						<view class="bd" v-if="item.type == 2">+{{item.jifen}}</view>
					</view>
					<uni-load-more :status="more"></uni-load-more>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
	export default {
		components:{
			uniLoadMore
		},
		data() {
			return {
				// tab栏属性设置
				tabCurrent: 0,
				tabGroup: ['所有记录', '使用记录', '获取记录'],
				activeColor: "#222",
				lineColor: "#2dbb55",
				
				
				creditCount: 0,
				creditList: [],
				isLoad: true,
				more: 'more',
				backgroundColor: 'linear-gradient(to bottom, #00D390, #00D390)',
				page: 1,
				pagesize: 15
			}
		},
		onLoad() {
			this.page = 1
			this.onLoadDatas()
			this.getMemberCredit()
		},
		onReachBottom(){
			this.onLoadDatas()
		},
		methods: {
			
			// 获取会员积分
			async getMemberCredit(){
				let params, intRes;
				params = {
					method: "api/v2/integral_integral/get_integral"
				}
				intRes = await this.$http(params)
				if(intRes.status){
					this.creditCount = intRes.data.jifen
				}else{
					uni.showToast({
						title: intRes.msg,
						icon: "none"
					})
				}
			},
			
			// TAB切换
			clickTab(index){
				this.page = 1
				this.creditList = []
				this.tabCurrent = index
				if(this.isLoad){
					this.isLoad = false
					this.onLoadDatas()
					
				}
				
			},
			
			// 加载数据
			async onLoadDatas(){
				let params, creditRes;
				params = {
					method: "api/v2/integral_integral/get_user_credit_list",
					type: this.tabCurrent,
					page: this.page,
					pagesize: this.pagesize
				}
				this.more = 'loading'
				creditRes = await this.$http(params)
				const { list} = creditRes.data
				this.isLoad = true
				this.creditList = [...this.creditList, ...list]
				if(list.length < this.pagesize){
					this.more = 'noMore'
				}
				this.page++
			}
			
		}
	}
</script>

<style lang="scss">
	
.header-bg-block{
	position: fixed;
	z-index: 0;
	width: 100%;
	height: 280rpx;
	//margin-bottom: 200rpx;
	background: linear-gradient(to bottom, #00D390, #6EEBB6);
	&::before{
		content: "";
		width: 420rpx;
		height: 240rpx;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		background: #00CB8B;
		opacity: 1;
		filter: blur(70px);
	}
	&::after{
		content: "";
		display: block;
		width: 100%;
		height: 100%;
		background: linear-gradient(to bottom, transparent, #f6f6f6);
	}
}

.header-bg-circle{
	position: fixed;
	top: -220rpx;
	right: -152rpx;
	z-index: 1000;
	width: 494rpx;
	height: 494rpx;
	border-radius: 50%;
	background: radial-gradient(circle, transparent, rgba(255,255,255,.5) 80%);
}
	
.credit-wrapper{
	position: relative;
	&__info-bar{
		color: #fff;
		padding: 94rpx 30rpx 40rpx;
		font-size: 36rpx;
		font-weight: bold;
		.num{
			color: #FFFA95;
			font-size: 64rpx;
			font-family: Arial, Helvetica, sans-serif;
		}
	}
}
.credit-content{
	position: relative;
	z-index: 997;
}
.credit-tab-area{
	border-radius: 20rpx;
	background: #fff;
	.credit-tab-bar{
		padding: 0 0 20rpx;
		position: relative;
		&::after{
			@include line;
			left: 24rpx;
			right: 24rpx;
		}
	}
	.credit-cell-group{
		min-height: 1000rpx;
		&__item{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 24rpx;
			position: relative;
			&::after{
				@include line;
				left: 24rpx;
				right: 24rpx;
			}
			.hd{
				flex: 0 0 560rpx;
				.con{
					color: #999;
					font-size: 24rpx;
				}
				.date{
					color: #c4c4c4;
					margin-top: 10rpx;
					font-size: 20rpx;
				}
			}
			.bd{
				color: #ff5000;
				margin-left: 24rpx;
				font-size: $uni-font-size-lg;
				font-weight: bold;
				font-family: Arial;
				&.c-green{
					color: $uni-color-primary;
				}
			}
		}
	}
}
</style>
